<template>
    <div>

        <el-form @submit.native.prevent ref="editForm" :model="formFileds">
            <el-row :gutter="24">
                <el-col :span="12">
                    <el-form-item>
                        <el-input v-model="formFileds.text" prefix-icon="el-icon-search" placeholder="搜索权限名称">
                        </el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="2">
                    <el-form-item>
                        <el-button type="primary">查询
                        </el-button>
                    </el-form-item>
                </el-col>
                <el-col :span="2">
                    <el-form-item>
                        <el-button type="primary" @click="add()">增加
                        </el-button>
                    </el-form-item>
                </el-col>
                <el-col :span="2">
                    <el-form-item>
                        <el-button type="primary" @click="deleteSelection">批量删除
                        </el-button>
                    </el-form-item>
                </el-col>

            </el-row>
        </el-form>

        <!--表格内容-->
        <el-table ref="list" :data="tableData" style="width: 100%; margin-bottom: 5px;" border 
            highlight-current-row :default-sort="{prop: 'date', order: 'descending'}" @row-click="handleRowClick"
            @select-all="handleCheckedAllAndCheckedNone" @select="handleCheckedAllAndCheckedNone"
            @selection-change="handleSelectionChange" :header-cell-style="{textAlign:'center'}"
            :cell-style="{textAlign:'center'}">
            <el-table-column type="selection">
            </el-table-column>
            <el-table-column property="powerId" label="权限ID">
            </el-table-column>
            <el-table-column property="title" label="权限名称">
            </el-table-column>
            <el-table-column property="describe" label="权限描述">
            </el-table-column>
            <el-table-column property="type" label="类型">
            </el-table-column>
            <el-table-column property="date" label="创建时间">
            </el-table-column>
            <el-table-column label="操作" width="150px">
                <template slot-scope="scope">
                    <el-button circle icon="el-icon-edit-outline" type="primary" title="编辑" size="small"
                        @click="rowEdit(scope.$index, scope.row)"></el-button>
                    <el-button circle icon="el-icon-delete" type="danger" title="删除" size="small"
                        @click="rowDel(scope.$index, scope.row, $event);"></el-button>
                </template>
            </el-table-column>
        </el-table>

        <!--分页-->
        <el-pagination :page-sizes="[10, 20, 30, 40,100]" :page-size="10" :total="100"
            layout="total, sizes, prev, pager, next, jumper">
        </el-pagination>

        <!-- 增加-弹出层 -->
        <PowerManageAdd ref="powerAddRef" v-if="addShow" :addShow="addShow" @dialogClose="dialogClose"></PowerManageAdd>
        <PowerManageEdit ref="powerEditRef" v-if="editShow" :editShow="editShow" @dialogClose="dialogClose"
            :record="formFileds"></PowerManageEdit>

    </div>
</template>
      
<script>
import PowerManageAdd from './powerManageAdd.vue';
import PowerManageEdit from './powerManageEdit.vue';

export default {
    name: "powerManage",
    components: {
        PowerManageAdd,
        PowerManageEdit
    },
    data () {
        return {
            formFileds: {
            },
            multipleSelection: null,
            tableData: [{
                id: 0,
                powerId: '1',
                title: '',
                type: '菜单权限',
                describe: '',
                date: '2022-10-1 12:00:00',
            },
            {
                id: 1,
                powerId: '1',
                title: '',
                type: '菜单权限',
                describe: '',
                date: '2022-10-1 12:00:00',
            }
            ],
            addShow: false,
            editShow: false
        }
    },
    methods: {

        handleRowClick (row, event, column) {

            // 仅选中当前行
            this.setCurRowChecked(row);
        },
        handleCheckedAllAndCheckedNone (selection) {

            // 当前选中仅一行时操作-（当前表格行高亮）
            1 != selection.length && this.$refs.list.setCurrentRow();
        },

        handleSelectionChange (val) {
            this.multipleSelection = val;
        },
        dialogClose () {

            this.addShow = false;
            this.editShow = false;
        },

        rowEdit (index, row) {
            // this.$refs.detailRef.handleEdit('qqqq')

            // //当前选中行
            this.formFileds = row;
            this.editShow = true;
        },

        deleteSelection () {

            if (!this.multipleSelection) {
                this.$message.warning('请至少选择一条数据进行删除！')
                return
            } else {

                this.$confirm('数据将会永久删除，是否继续？', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning',
                    center: true
                }).then(() => {

                    console.log(this.multipleSelection)

                    // delete (array).then(res => {//接口
                    //     console.log(res);
                    //     this.search();//删除完成后初始化查询列表
                    // })

                })
            }
        },
        rowDel (index, row, event) {
            // 让当前删除按钮失焦
            event.target.blur();

            this.$confirm('确定要删除当前行吗？', '删除', {
                comfirmButtonText: '确定',
                cancelButtonText: '取消'
            }).then(() => {

                this.tableData.splice(row.id, 1);
                this.$message.success('删除成功');
                return false;
            });
        },
        add () {
            this.addShow = true
        }
    }
}
</script>
      
<style scoped lang="less">
.el-form {
    padding: 0 10px;
}

.el-date-editor {
    width: 100% !important;
}
</style>
      